<template>
  <view class="home-page">
    <view class="home">
      <!-- <nut-searchbar placeholder="请输入搜索内容" v-model="searchTxt" type="text" clearable>
        <template #leftin>
          <Search2 />
        </template>
      </nut-searchbar> -->

      <myInput v-model="searchTxt" @search="handleSearch" />

      <swiper
        :init-page="0"
        :auto-play="3000"
        :circular="true"
        pagination-visible
        pagination-color="#426543"
        pagination-unselected-color="#808080"
        class="swiper-container"
      >
        <swiper-item
          v-for="(item, index) in pics"
          :key="index"
          class="swiper-item"
        >
          <image
            :src="item"
            mode="aspectFill"
            class="swiper-image"
            lazy-load
            show-menu-by-longpress
          />
        </swiper-item>
      </swiper>

      <view class="s-title" @tap="onTest">
        <text>酒类</text>
        <text>更多</text>
      </view>

      <!-- 顶部进度条 -->
      <view class="progress-bar">
        <view
          class="progress-item"
          v-for="(item, index) in progressList"
          :key="index"
          @tap="handleFeatureClick(item)"
        >
          <image :src="item.icon" class="img1" mode="aspectFill"></image>

          <text class="title">{{ item.title }}</text>
        </view>
      </view>

      <view class="s-title">
        <text>爆款精品</text>
        <text>更多</text>
      </view>

      <view class="case-more">
        <view
          class="case-box"
          v-for="(item, index) in caseList"
          :key="index"
          @tap="goDetail(item)"
        >
          <image class="case-img" :src="item.image" mode="aspectFill"></image>
          <view class="p-title">{{ item.title }}</view>
          <view class="p-price">￥{{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { ref } from "vue";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import Taro from "@tarojs/taro";
import { Search2 } from "@nutui/icons-vue-taro";
import myInput from "@/components/my-input/index.vue";
const searchTxt = ref("");

const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

Taro.setNavigationBarTitle({
  title: "首页",
});

const pics = [pic, pic, pic];

// 进度条数据
const progressList = [
  { title: "质量保证", icon: pic },
  { title: "现场评估", icon: pic },
  { title: "明码标价", icon: pic },
  { title: "售后保障", icon: pic },
];

// 案例展示数据
const caseList = [
  {
    title:
      "红红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒酒美酒",
    image: pic,
    price: 100,
  },
  { title: "红酒美酒红酒美酒红酒美酒红酒美酒", image: pic, price: 1800 },
  {
    title: "红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒",
    image: pic,
    price: 300,
  },
  { title: "红酒美酒红酒美酒红酒美酒红酒美酒", image: pic, price: 50 },
];

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
  Taro.navigateTo({
    url: `/pages-detail/cate/list-view?id=${item.id}`,
  });
};

const handleSearch = (value: string | number) => {
  console.log("搜索值：", value);
  // 执行搜索逻辑
};

const goDetail = (item) => {
  Taro.navigateTo({
    url: "/pages-detail/detail/index?id=" + item.id,
  });
};

const onTest = () => {
  Taro.navigateTo({
    url: "/pages-detail/addr/index",
  });
};
</script>

<style lang="scss">
.home-page{
  padding-bottom: 40rpx;
}
.home {
  width: 700rpx;
  margin: auto;
  height: 100%;
}
.ico {
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}
.tops {
  width: 100%;
  height: 300rpx;
}

.img1 {
  width: 80rpx;
  height: 80rpx;
}

.img2 {
  width: 120rpx;
  height: 120rpx;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  gap: 16rpx;

  .progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    box-shadow: 0 0 10rpx #999;
    border-radius: 8rpx;

    .img1 {
      width: 100%;
      height: 240rpx;
    }

    .title {
      font-size: 24rpx;
      color: #333;
      padding: 8rpx;
    }
  }
}

.feature-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32rpx;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32rpx;
      background-color: #f8f8f8;
      border-radius: 16rpx;

      text {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
.case-more {
  display: flex;
  width: 100%;
  gap: 20rpx;
  flex-wrap: wrap;

  .case-box {
    box-shadow: 0 0 10rpx #999;
    display: flex;
    flex-direction: column;
    width: 338rpx;
    border-radius: 8rpx;
    .case-img {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
    }

    .p-title {
      font-size: 24rpx;
      color: #333;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 4rpx;
    }

    .p-price {
      font-size: 24rpx;
      color: #ff0000;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 4rpx;
    }
  }
}
.case-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;

    .case-item {
      image {
        width: 100%;
        height: 240rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.s-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10rpx;
  text {
    font-size: 30rpx;
    color: #333;
  }
}

.swp {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.swiper-container {
  width: 100%;
  height: 300rpx; /* 统一使用 rpx 单位 */
  border-radius: 16rpx;
  overflow: hidden;

  .swiper-item {
    width: 100%;
    height: 100%;

    .swiper-image {
      width: 100%;
      height: 100%;
      display: block;
      will-change: transform; /* 提升动画性能 */
    }
  }

  /* 修复分页器位置 */
  .nut-swiper-pagination {
    bottom: 20rpx !important;

    .nut-swiper-pagination-item {
      width: 16rpx;
      height: 16rpx;
      margin: 0 8rpx;
    }
  }
}
</style>
